<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>放烟花效果（面向对象版）</title>
		<style type="text/css">
		html,body{overflow:hidden;}
		body,div,p{margin:0;padding:0;}
		body{background:#000;font:12px/1.5 arial;color:#7A7A7A;}
		a{text-decoration:none;outline:none;}
		#tips,#copyright{position:absolute;width:100%;height:50px;text-align:center;background:#171717;border:2px solid #484848;}
		#tips{top:0;border-width:0 0 2px;}
		#tips a{font:14px/30px arial;color:#FFF;background:#F06;display:inline-block;margin:10px 5px 0;padding:0 15px;border-radius:15px;}
		#tips a.active{background:#FE0000;}
		#copyright{bottom:0;line-height:50px;border-width:2px 0 0;}
		#copyright a{color:#FFF;background:#7A7A7A;padding:2px 5px;border-radius:10px;}
		#copyright a:hover{background:#F90;}
		p{position:absolute;top:55px;width:100%;text-align:center;}
		.fire {
			width: 3px;
			height: 50px;
			background: white;
			position: absolute;
		} 
		.spark {
			position:absolute;
			width: 6px;
			height: 6px;
			border-radius: 50%;
		}
		</style>
	<script src="base.js"></script>
	<script src="move.yintao1.05.js" type="text/javascript" charset="utf-8"></script>	
	<script type="text/javascript">
		window.onload = function(){
			//首先获取鼠标点击的位置
			document.addEventListener("click",function(e){
				var e = e || event;
				//获取鼠标点击位置
				var mousePoint = {x:e.clientX, y:e.clientY};
				//生成烟花并发射
				var fire = new Fire(mousePoint);
				//生成烟花初始化
				fire.init();
				//生成烟花发射
				fire.launch();
			});
			//发射阶段
			function Fire(mousePoint){
				//生成一个烟花
				this.body = document.createElement("div");
				//生成的烟花初始化
				this.init = function(){
					this.body.className = "fire";
					this.body.style.left = mousePoint.x + "px";
					this.body.style.top = window.innerHeight + "px";
					document.body.appendChild(this.body);
				}
				//生成的烟花发射
				this.launch = function(){
					animate(this.body, {top:mousePoint.y, height:3}, {callback:function(){
						//发射后销毁 然后产生随机数量的烟花
						this.distroy();
						var count = Math.round( Math.random()*20 + 100 );
						for (var i = 0; i < count; i++) {
							var spark = new Spark(mousePoint);
							spark.init();
							spark.move();
						}
					}.bind(this)});
				}
				//生成的烟花发射后销毁
				this.distroy = function(){
					this.body.remove();
				}
			}
			//爆炸后烟花炸点阶段
			function Spark(mousePoint){
				//产生一个炸点
				this.body = document.createElement("div");
				//炸点初始化
				this.init = function(){
					this.body.className = "spark";
					this.body.style.left = mousePoint.x + "px";
					this.body.style.top = mousePoint.y + "px";
					this.body.style.background = randomColor();
					//初始速度 
					this.speedx = randomInt(-20,20);
					this.speedy = randomInt(-20,20);
					document.body.appendChild(this.body);
				}
				//炸点做抛物线运动
				this.move = function(){
					this.timer = setInterval(function(){
						this.body.style.left = this.body.offsetLeft + this.speedx + "px";
						this.body.style.top = this.body.offsetTop + this.speedy++ + "px";
						if(this.body.offsetTop > window.innerHeight){
							this.distroy();
						}
					}.bind(this),30);
				}
				//炸点落地后消失
				this.distroy = function(){
					this.body.remove();
				}
			}
		}
	</script>
</head>
<body>
<div id="tips">
	<a id="manual" href="javascript:;" class="active">手动放烟花</a>
	<a id="auto" href="javascript:;" class="">自动放烟花</a>
	<a id="stop" href="javascript:;" class="">停止放烟花</a>
</div>
<p>由于浏览器渲染能力有限, 当浏览器为IE或选择自动放烟花时, 随机生成的烟花碎片范围自动调整至20-30</p>
<div id="copyright">建议使用Firefox, Chrome浏览器预览效果. </div>

</body></html>